﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>简单的jQuery无缝向上滚动效果演示1_dowebok</title>
<style>
* { margin: 0; padding: 0;}
.myscroll { width:610px; border: 3px solid red; position: relative; z-index: 2222222; height: 260px; margin: 0 auto; border: 1px solid #ccc; line-height: 26px; font-size: 12px; overflow: hidden;}
.myscroll li { height: 26px; margin-left: 25px;}
.myscroll a { color: #333; text-decoration: none;}
.myscroll a:hover { color: #ED5565; text-decoration: underline;}
</style>
	<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript">
$(function(){
	$('.myscroll').myScroll({
		speed: 60, //数值越大，速度越慢
		rowHeight: 65 //li的高度
	});
});
</script>
</head>

<style>
	body{
	}
	.demo2{
		background: #d9edf7;
		border-radius: 20px;
		opacity: 0.7;
		font-size: 65px;
		line-height: 68px;
		color: red;
		text-shadow: 0 0 10px #FF1177;
		z-index: 9999;
	}

</style>
<style>

	body {
		margin:0;
	}
	canvas {
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
</style>
<body>


<div class="myscroll">
		<div class="demo2" >
			<div > 什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚什么是鳄鱼法则？，假定一只鳄鱼咬住你的脚，如果你用手去试图挣脱你的脚，</div>


		</div>

</div>

<script type="text/javascript" src="js/dist/animatext.min.js"></script>
<script type="text/javascript">
	$(".demo2").animatext({speed: 150,
		effect: 'flipInX',
		infinite: true
	});




</script>
<script type="text/javascript">
	var w = window.innerWidth;
	var h = window.innerHeight;

	var dustCanvas = document.createElement('canvas');
	var dustCtx = dustCanvas.getContext('2d');
	var starCanvas = document.createElement('canvas');
	var starCtx = starCanvas.getContext('2d');

	document.body.appendChild(dustCanvas);
	document.body.appendChild(starCanvas);

	dustCanvas.width = starCanvas.width = w;
	dustCanvas.height = starCanvas.height = h;

	dustCtx.globalCompositeOperation = 'lighter';
	starCtx.globalCompositeOperation = 'lighter';

	var galaxies = [];

	var mouse = {
		pos: {
			x: w * 0.5,
			y: h * 0.5
		},
		speed: 0
	};

	var randomNumbers = length => Array.from(new Array(length), () => Math.random());
	var PI = Math.PI;
	var TAU = PI * 2;
	var r = () => Math.random();
	var angle2 = (p1,p2) => Math.atan2(
			p2[1]-p1[1],
			p2[0]-p1[0]
	);
	var distance2 = (p1,p2) => Math.sqrt(
			Math.pow(p1[0]-p2[0], 2) +
			Math.pow(p1[1]-p2[1], 2)
	);

	var createDustParticle = (color) => {

		var canvas = document.createElement('canvas');

		var w = 100;
		var h = 100;
		var cx = w * 0.5;
		var cy = h * 0.5;

		canvas.width = w;
		canvas.height = h;
		var ctx = canvas.getContext('2d');
		canvas.ctx = ctx;

		var xRand = -5 + (r()*10);
		var yRand = -5 + (r()*10);
		var xRand2 = 10 + (r()*(cx/2));
		var yRand2 = 10 + (r()*(cy/2));

		var color = color || {
			r: Math.round(150+(r()*100)),
			g: Math.round(50+(r()*100)),
			b: Math.round(50+(r()*100))
		};

		ctx.fillStyle = `rgba(${color.r},${color.g},${color.b},.02)`;

		Array
				.from(new Array(200), () => randomNumbers(3))
				.forEach( (p,i,arr) => {
					var length = arr.length;

					var x = Math.cos( TAU/xRand/length*i ) * p[2]*xRand2 + cx;
					var y = Math.sin( TAU/yRand/length*i ) * p[2]*yRand2 + cy;

					ctx.beginPath();
					ctx.moveTo(x, y);
					ctx.arc(x, y, p[2]*4, 0, TAU);
					ctx.fill();

				});

		return canvas;
	};

	var Galaxy = function(x,y) {

		var g = this;

		g.x = x;
		g.y = y;
		g.stars = [];
		g.dust = [];
		g.drag = r();

		g.angleOffsetX = TAU*r();
		g.angleOffsetY = TAU*r();
		g.realAngleOffsetX = 0;
		g.realAngleOffsetY = 0;

		g.color = {
			r: Math.round(50+(r()*100)),
			g: Math.round(50+(r()*100)),
			b: Math.round(150+(r()*100))
		};

		var calculateStarDustParams = o => {
			o.angle = angle2([g.x,g.y], [o.x,o.y]);
			o.distance = distance2([g.x,g.y], [o.x,o.y]);
			o.xAspect = [o.x/o.y];
			o.yAspect = [o.y/o.x];
		};

		g.calculateCenter = () => {
			if (!g.stars.length) return;
			g.x = g.stars
							.map(s => s.x)
							.reduce((previous,current) => previous + current)
					/ g.stars.length;

			g.y = g.stars
							.map(s => s.y)
							.reduce((previous,current) => previous + current)
					/ g.stars.length;

			g.stars.forEach(calculateStarDustParams);
			g.dust.forEach(calculateStarDustParams);
		};

	};

	var Star = function(x, y, spread) {
		var s = this;
		s.x = x + Math.cos(TAU*r()) * spread;
		s.y = y + Math.sin(TAU*r()) * spread;
		s.radius = r()+0.25;
		s.speed = r();
	};

	var Dust = function(x, y, size) {
		var d = this;
		d.x = x;
		d.y = y;
		d.size = size;
		d.texture = createDustParticle();
		d.speed = r();
	};

	var updateStarDust = (s,g) => {
		if (g == currentGalaxy && drawingMode) return;
		s.angle += (0.5+(s.speed*0.5))/s.distance;
		s.x = g.x + (Math.cos(s.angle+g.realAngleOffsetX)*s.distance);
		s.y = g.y + (Math.sin(s.angle+g.realAngleOffsetY)*s.distance);
	};

	var update = () => {
		galaxies.forEach(g => {
			if (g != currentGalaxy) {
				g.realAngleOffsetX +=
						g.realAngleOffsetX < g.angleOffsetX
								? (g.angleOffsetX-g.realAngleOffsetX)*0.05 : 0;
				g.realAngleOffsetY +=
						g.realAngleOffsetY < g.angleOffsetY
								? (g.angleOffsetY-g.realAngleOffsetY)*0.05 : 0;
			}
			g.stars.forEach((s) => {
				/*s.distance -= s.distance < 2
                  ? 0
                  : TAU/s.distance;*/
				updateStarDust(s,g);
			});
			g.dust.forEach((d) => {
				/*d.distance -= d.distance < 50
                  ? 0
                  : TAU/d.distance;*/
				updateStarDust(d,g);
			});
		});
	};

	var render = () => {

		dustCtx.globalCompositeOperation = 'source-over';
		dustCtx.fillStyle = 'rgba(0,0,0,.05)';
		dustCtx.fillRect(0,0,w,h);
		dustCtx.globalCompositeOperation = 'lighter';

		starCtx.clearRect(0,0,w,h);
		starCtx.fillStyle = '#ffffff';
		starCtx.strokeStyle = 'rgba(255,255,255,.05)';
		starCtx.beginPath();

		if (drawingMode) galaxies.forEach(g => {
			starCtx.moveTo(g.x, g.y);
			starCtx.arc(g.x,g.y,2,0,TAU);
		});

		galaxies.forEach(g => {
			g.stars.forEach(s => {
				starCtx.moveTo(s.x, s.y);
				starCtx.arc(s.x,s.y,s.radius,0,TAU);
			});
			g.dust.forEach(d => {
				dustCtx.drawImage(d.texture, d.x-(d.size*0.5), d.y-(d.size*0.5), d.size, d.size)
			});
		});

		dustCtx.fill();
		starCtx.fill();

		if (drawingMode && currentGalaxy) {
			starCtx.beginPath();
			currentGalaxy.stars.forEach((s,i) => {
				starCtx.moveTo(s.x, s.y);
				starCtx.lineTo(currentGalaxy.x, currentGalaxy.y);
			});
			starCtx.stroke();
		}

	};

	var currentGalaxy = null;

	var drawingMode = false;

	var activateDraw = e => {
		drawingMode = true;
		mouse.pos.x = e.layerX;
		mouse.pos.y = e.layerY;

		console.log
		currentGalaxy = new Galaxy(e.layerX, e.layerY);
		galaxies.push(currentGalaxy);
	};
	var disableDraw = e => {

		drawingMode = false;
		currentGalaxy = null;
	};
	var draw = e => {
		if (!drawingMode) return;

		currentGalaxy.stars.push(new Star(mouse.pos.x, mouse.pos.y, mouse.speed));
		currentGalaxy.stars.push(new Star(mouse.pos.x, mouse.pos.y, mouse.speed));
		currentGalaxy.stars.push(new Star(mouse.pos.x, mouse.pos.y, mouse.speed));

		if (mouse.speed*1.5 > 13 && mouse.speed < 100) currentGalaxy.dust.push(
				new Dust(
						(currentGalaxy.x + (Math.cos(TAU*r()) * mouse.speed*0.1)),
						(currentGalaxy.y + (Math.sin(TAU*r()) * mouse.speed*0.1)),
						mouse.speed*1.5
				)
		);

		currentGalaxy.calculateCenter();

	};

	var loop = () => {
		draw();
		update();
		render();
		window.requestAnimationFrame(loop);
	};

	loop();

	var moveEvent = e => {
		mouse.speed =  distance2(
				[e.layerX,e.layerY],
				[mouse.pos.x,mouse.pos.y]
		);
		mouse.pos.x = e.layerX;
		mouse.pos.y = e.layerY;
		draw(e);
	};

	window.addEventListener('mousedown', activateDraw);
	window.addEventListener('mousemove', moveEvent);
	window.addEventListener('mouseup',disableDraw);


</script>
</body></html>
</body>
</html>